<template>
	<div v-if="props.type=='demo'" class="tabswarp">
		<ul class="tabsdemo">
			<li v-for="(item,index) in props.tabs" :key="index" :class="{'tabs_active':index==activeIndex}" @click="changeTabs(index)">
				<Icon :name="item.icon"/>
				{{item.name}}
			</li>
		</ul>
	</div>
	<div v-if="props.type=='line'" class="tabswarp">
		<ul class="tabsline">
			<li v-for="(item,index) in props.tabs" :key="index" :class="{'tabs_active':index==activeIndex}" @click="changeTabs(index)">
				<span :style="{'font-size':props.fontSize+'px'}">
					<Icon :name="item.icon"/>
					{{item.name}}
				</span>
			</li>
		</ul>
	</div>
	<div v-if="props.type=='verticle'" class="tabswarp">
		<ul class="tabsverticle">
			<li v-for="(item,index) in props.tabs" :key="index" :class="{'tabs_active':index==activeIndex}" @click="changeTabs(index)">
				<span :style="{'font-size':props.fontSize+'px'}">
					<Icon :name="item.icon"/>
					{{item.name}}
				</span>
			</li>
		</ul>
	</div>
	
</template>

<script setup>
import { defineProps,ref, defineEmits} from 'vue'
const props = defineProps({
	type:{
		type: String,
		default: 'demo'
	},
	tabs:Array,
	fontSize:{
		type: String,
		default: '14'
	},
	width:{
		type: String,
		default: '200'
	},
	height:{
		type: String,
		default: '40'
	},
})
var activeIndex =ref(0);
const emits = defineEmits(['childEvent']);
const  changeTabs = (index)=>{
	activeIndex.value=index;
	emits('childEvent',index);
}
</script>

<style scoped>
	li{
		cursor: pointer;
	}
	.tabswarp{
		user-select: none;
		margin:20px;
	}
	.tabsdemo {
		background: #ddd;
		text-align: center;
		border-radius: 150px;
		display: flex;
		width: v-bind(props.width+'px');
		height: v-bind(props.height+'px');
		line-height: v-bind(props.height+'px');
	}

	.tabsdemo li {
		flex: 1;
		color:#333;
		font-size: v-bind(props.fontSize+'px');
		cursor: pointer;
	}
	
	.tabsdemo li.tabs_active{
		border-radius:75px;
		background: rgb(42,250,223);
		background: -moz-linear-gradient(138deg, #E91E63 0%, #9C27B0 100%);
		background: -webkit-linear-gradient(138deg, #E91E63 0%, #9C27B0 100%);
		background: linear-gradient(138deg, #E91E63 0%, #9C27B0 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2afadf",endColorstr="#4c83ff",GradientType=1);
		color:#fff;
	}
	
	.tabsdemo li.tabs_active>i{
		color:#fff!important;
	}
	
	.tabsline{
		text-align: center;
		display: flex;
		border-bottom: 2px solid #e4e7ed;
		width: v-bind(props.width+'px');
		height: v-bind(props.height+'px');
		line-height: v-bind(props.height+'px');
	}
	
	.tabsline li{
		display: inline-block;
		flex: 1;
		color:#333;
		font-size: 12px;
		cursor: pointer;
	}
	
	.tabsline li.tabs_active span{
		border-bottom: 2px solid #2196F3;
		color: #2196f3;
	}
	
	.tabsline li span{
		transition: color .5s ease-in-out;
		display: inline-block;
		height: 100%;
	}
	
	.tabsline li span:hover{
		color:#2196F3;
	}
	
	.tabsverticle{
		text-align: center;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: flex-start;
		width: v-bind(props.width+'px');
		height: v-bind(props.height+'px');
		padding:8px;
		box-sizing: border-box;
	}
	.tabsverticle li{
		height: 100%;
		width: 100%;
		display: inline-block;
		flex: 1;
	}
	.tabsverticle li span{
		height: 100%;
		width: 100%;
		display:flex;
		align-items: center;
		padding: 0 10px;
		box-sizing: content-box;
		/* flex: 1; */
	}
	.tabsverticle li.tabs_active{
		background: #eaf2ff;
		color:#1e80ff
	}
	
	.tabsverticle li span i{
		margin-right: 10px;
	}
	
	.tabsverticle li.tabs_active span>i{
		color:#1e80ff!important;
	}
</style>